<template>
  <div>
    <h1 class="">账号登录</h1>
    <el-form
      ref="loginFormRef"
      :model="user"
      :rules="rules"
      class="w100"
      status-icon
      label-position="top"
    >
      <el-form-item prop="name" :label="$t('Username')">
        <el-input
          v-model="user.name"
          autocomplete="off"
          type="text"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item prop="password" :label="$t('Password')">
        <el-input
          v-model="user.password"
          autocomplete="off"
          type="password"
          placeholder="请输入密码"
          show-password
          @keyup.enter="onLogin"
        />
      </el-form-item>
      <el-form-item>
        <div class="remember row w100">
          <el-checkbox
            class="f-1"
            @change="onRememberChange"
            v-model="remember"
          >
            记住我
            <!-- {{                  $language.local('记住我')                }} -->
          </el-checkbox>

          <router-link :to="'/login/sms'">短信验证登录</router-link>
          <!-- <a href="javascript:void(0)" @click="SMSLogin">短信验证登录</a> -->
        </div>
      </el-form-item>
      <el-form-item>
        <el-button class="w100" type="primary" @click="onLogin">
          {{ $t('登录') }}
        </el-button>
      </el-form-item>
    </el-form>

    <div class="forget-password row jcsb">
      <router-link :to="'forget'">已有帐号， 忘记密码?</router-link>
      <router-link :to="'/login/registration'">立即注册</router-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { shios } from '@/api/Shios';
import router from '@/route';
import { store } from '@/store';
let userCache = localStorage.getItem('remember-user');
const user = ref<UserType>({});
if (userCache) {
  user.value = JSON.parse(userCache);
}
type UserType = {
  name?: string;
  password?: string;
  againpass?: string;
  code?: string;
  smsvcode?: string;
  mobileNumber?: string;
};

/**
 * 验证两次密码
 * @param rule
 * @param value
 * @param callback
 */
function validator(rule: any, value: any, callback: any) {
  if (value != user.value.password) {
    callback(new Error('两次密码不一致'));
  } else {
    callback();
  }
}
const rules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 5,
      message: '长度在 不小于 5 个字符',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      message: '长度在 不小于 6 个字符',
      trigger: 'blur',
    },
  ],
};
const loginFormRef = ref<FormInstance>();
/**
 * 点击登录
 */
async function onLogin() {
  if (!loginFormRef.value) return;
  await loginFormRef.value.validate();
  onSubmit();
  //swipeVerifyDialogVisible.value = true;
}

const remember = ref(Boolean(window.localStorage.getItem('remember')));

/**
 *登录表单提交
 */
async function onSubmit() {
  const res = await shios.post<LoginDTO>('login', {
    data: user.value,
  });
  console.log(res);
  console.log(res.data);
  if (!res.ok) {
    return;
  }
  sessionStorage.clear();
  store.token.update(res.data.token);
  store.user.update(res.data.user);

  shios.token = store.token.state.accessToken;
  if (remember.value) {
    localStorage.setItem('remember-user', JSON.stringify(user.value));
  } else {
    localStorage.removeItem('remember-user');
  }
  router.push('/');
}

/**
 * 记住我change
 * @param e
 */
function onRememberChange(e: string | number | boolean) {
  if (e) {
    window.localStorage.setItem('remember', e.toString());
  } else {
    window.localStorage.removeItem('remember');
  }
}
</script>

<style lang="scss" scoped></style>
